<template>
  <div class="cs-p">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-button
          type="primary"
          size="mini"
          @click.native="handleFormAddorUpdate('')">新增</el-button>
        <el-table
          stripe
          border
          max-height="690"
          :data="dictionaryData"
          :highlight-current-row="true"
          @row-click="rowClick"
          class="el-table-parent"
          style="width: 100%">
          <el-table-column
            prop="code"
            label="分组编码">
            <template slot-scope="scope">
              <span style="color: #0055ff; cursor: pointer;">{{scope.row.code}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="dictTypeName"
            label="分组名称">
          </el-table-column>
          <el-table-column
            prop="description"
            label="备注"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="shop_price"
            label="操作">
            <template slot-scope="scope">
              <el-tag size="mini" style="cursor: pointer;" @click.native="handleFormAddorUpdate(scope.row)">编辑</el-tag>
              <el-tag size="mini" type="danger" style="cursor: pointer;" @click.native="delParentDia(scope.row.dictTypeId)">删除</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-button
          type="primary"
          size="mini"
          @click.native="handleFormAddorUpdateChildren('')">新增</el-button>
        <el-table
          stripe
          border
          max-height="690"
          :data="dictionaryChildrenData"
          style="width: 100%">
          <el-table-column
            prop="dictTypeCode"
            label="分组编码">
          </el-table-column>
          <el-table-column
            prop="dictName"
            label="字典名称">
          </el-table-column>
          <el-table-column
            prop="code"
            label="字典编码">
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-tag size="mini" style="cursor: pointer;" @click="handleFormAddorUpdateChildren(scope.row)">编辑</el-tag>
              <el-tag size="mini" style="cursor: pointer;" type="danger" @click="deleteChildrenData(scope.row.dictId)">删除</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 弹框、对话框 -->
    <add-parent-dialog v-if="addParentFlag" ref="addParentDialog" @refreshParentDataList="getTable()"></add-parent-dialog>
    <addchildren-dialog v-if="addChildrenFlag" ref="addChildrenDialog" @refreshChildrenDataList="handleDictTypeID"></addchildren-dialog>
  </div>
</template>

<script>
// 引入dict.js文件
import {
  getParentDictTable,
  deleteDictData,
  getDictData,
  deleteChildrenDict
} from '@/api/auth/dict'
import AddParentDialog from '../AddDialog/addparentdialog'
import AddchildrenDialog from '../AddDialog/addchildrendialog'
import bus from '@/api/auth/dictBus.js'
export default {
  components: {
    AddParentDialog,
    AddchildrenDialog
  },
  data() {
    return {
      addParentFlag: false,
      addChildrenFlag: false,
      // 字典数据对象主表
      dictionaryData: [],
      // 字典数据对象子表
      dictionaryChildrenData: [],
      dTid: '',
      value: '',
      options: []
    }
  },
  created() {
    this.getTable()
    // header 搜索框传递过来的数据
    bus.$on('inquireData', (res) => {
      this.dictionaryChildrenData = res
    })
    bus.$on('inquireParentData', (res) => {
      this.dictionaryData = res
    })
  },
  methods: {
    rowClick(row, cloumn, index) {
      this.handleDictTypeID(row.dictTypeId)
    },
    // 获取数据字典的所有数据
    getTable() {
      getParentDictTable().then((res) => {
        this.dictionaryData = res.data
      })
    },
    // 单个根据id删除(主)
    delParentDia(dictTypeId) {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        deleteDictData(dictTypeId).then((res) => {
          // 重新拉取数据
          this.getTable()
        })
          .catch(() => {
          })
      })
    },
    // 新增 / 编辑
    handleFormAddorUpdate(row) {
      this.addParentFlag = true
      var _this = this
      this.$nextTick(() => {
        _this.$refs.addParentDialog.init(row, true)
      })
    },
    // 点击获取子字典数据(子)
    handleDictTypeID(dictTypeId) {
      this.dTid = dictTypeId
      getDictData({ id: dictTypeId }).then(res => {
        this.dictionaryChildrenData = res.data
      })
    },
    // 子表新增 / 修改
    handleFormAddorUpdateChildren(val) {
      this.addChildrenFlag = true
      var _this = this
      this.$nextTick(() => {
        _this.$refs.addChildrenDialog.init(val, true)
      })
    },
    // 子表批量删除
    // handleFormDelChildren() {
    // },
    // 子表单个删除
    deleteChildrenData(dictId) {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        deleteChildrenDict(dictId).then((res) => {
          // 刷新表格
          this.handleDictTypeID(this.dTid)
        })
          .catch(() => {
          })
      })
    }
  }
}
</script>

<style scoped>
  /* 设置table中的数据居中 */
  /deep/.el-table th > .cell {
    text-align: center;
  }
  /deep/.el-table .cell {
    text-align: center;
  }
  .el-button{
    margin-bottom: 20px;
  }
  span:nth-child(1){
    margin-right: 5px;
  }
</style>
